import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/forget-password',
    name: 'ForgetPassword',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "account" */ '../views/ForgetPasswordView')
  },
  {
    path: '/sign-in',
    name: 'SignIn',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "account" */ '../views/SignInView')
  },
  {
    path: '/show-blog',
    name: 'ShowBlog',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "show-blog" */ '../views/ShowBlog')
  },
  {
    path: '/create-article',
    name: 'CreateArticle',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "show-blog" */ '../views/CreateArticle')
  },
  {
    path: '/show-article',
    name: 'ShowArticle',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "show-blog" */ '../views/ShowArticle')
  },
  {
    path: '/explore',
    name: 'Explore',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "show-blog" */ '../views/Explore')
  },
  {
    path: '/background',
    name: 'Background',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "background" */ '../views/PersonalBackground'),
    children: [
      {
        path: 'my-articles',
        name: 'MyArticles',
        component: () => import(/* webpackChunkName: "background" */ '../views/MyArticles')
      },
      {
        path: 'my-profile',
        name: 'MyProfile',
        component: () => import(/* webpackChunkName: "background" */ '../views/MyProfile')
      },
      {
        path: 'attentions',
        name: 'Attentions',
        component: () => import(/* webpackChunkName: "background" */ '../views/Attentions')
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

export default router
